<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <link rel="stylesheet" href="../../third-party/mathquill/mathquill.css" />
        <style>
            html,
            body,
            .main {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            .main {
                width: 1024px;
                height: 1024px;
            }
            .mathquill-editable,
            .mathquill-rendered-math {
                border: 0px;
                padding: 0px;
                margin: 4px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="mathquill-editable"></div>
        </div>

        <div>
            <input id="blurHelper" />
        </div>

        <script src="../../third-party/jquery.min.js"></script>
        <script src="../../third-party/mathquill/mathquill.js"></script>
        <script>
            $(function () {
                var UM = parent.UM,
                    $iframe = $(getSelfIframe()),
                    editorId = $iframe.parents(".edui-body-container").attr("id"),
                    editor = UM.getEditor(editorId),
                    timer;

                /* 获得当前公式所在的iframe节点 */
                function getSelfIframe() {
                    var iframes = parent.document.getElementsByTagName("iframe");
                    for (var key in iframes) {
                        if (iframes[key].contentWindow == window) {
                            return iframes[key];
                        }
                    }
                    return null;
                }
                /* 获得当前url上的hash存储的参数值 */
                function getLatex() {
                    return $iframe.attr("data-latex") || "";
                }
                /* 保存场景 */
                function saveScene() {
                    timer && clearTimeout(timer);
                    timer = setTimeout(function () {
                        editor.fireEvent("savescene");
                        editor.fireEvent("contentchange");
                        editor.fireEvent("selectionchange");
                        timer = null;
                    }, 300);
                }
                /* 设置编辑器可编辑 */
                function enableEditor() {
                    if (editor.body.contentEditable == "false") {
                        editor.setEnabled();
                    }
                }
                /* 设置编辑器不可编辑 */
                function disableEditor() {
                    if (editor.body.contentEditable == "true") {
                        editor.setDisabled(["undo", "redo", "preview", "formula"], true);
                    }
                }

                /* 公式 */
                var Formula = function () {
                    var _this = this,
                        latex = getLatex();

                    this.isFocus = false;
                    this.isDisabled = false;

                    /* 加载公式内容 */
                    this.$mathquill = $(".mathquill-editable").mathquill("latex", latex);

                    /* 设置活动状态的公式iframe */
                    this.$mathquill.on("mousedown", function () {
                        /* 编辑器不可用时,公式也不可用 */
                        if (_this.disabled) return false;

                        /* 第一次点击当前公式,设置公式活动 */
                        if (!$iframe.hasClass("edui-formula-active")) {
                            disableEditor();
                            editor.blur();
                            editor.$body
                                .find("iframe")
                                .not($iframe)
                                .each(function (k, v) {
                                    v.contentWindow.formula.blur();
                                });
                            if (_this.$mathquill.find(".cursor").css("display") == "none") {
                                _this.refresh();
                                _this.$mathquill.addClass("hasCursor");
                            }
                        }
                        _this.focus();
                    });
                    editor.addListener("click", function () {
                        _this.blur();
                        enableEditor();
                    });

                    /* 里面focus,编辑器也判断为focus */
                    editor.addListener("isFocus", function () {
                        return _this.isFocus;
                    });
                    /* um不可用,公式也不可编辑 */
                    editor.addListener("setDisabled", function (type, except) {
                        if (!(except && except.join(" ").indexOf("formula") != -1) && _this.isDisabled != true) {
                            _this.setDisabled();
                        }
                    });
                    editor.addListener("setEnabled", function () {
                        if (_this.isDisabled != false) {
                            _this.setEnabled();
                        }
                    });

                    /* 设置更新外层iframe的大小和属性 */
                    $(document.body)
                        .on("keydown", function () {
                            _this.updateIframe();
                        })
                        .on("keyup", function () {
                            _this.updateIframe();
                        });

                    /* 清除初始化的高亮状态 */
                    this.$mathquill.removeClass("hasCursor");

                    /* 初始化后延迟刷新外层iframe大小 */
                    setTimeout(function () {
                        _this.updateIframe();
                    }, 300);
                };

                Formula.prototype = {
                    focus: function () {
                        $iframe.addClass("edui-formula-active");
                        this.isFocus = true;
                    },
                    blur: function () {
                        $iframe.removeClass("edui-formula-active");
                        this.removeCursor();
                        this.isFocus = false;
                    },
                    removeCursor: function () {
                        this.$mathquill.find("span.cursor").hide();
                        this.$mathquill.parent().find(".hasCursor").removeClass("hasCursor");
                    },
                    updateIframe: function () {
                        $iframe.width(this.$mathquill.width() + 8).height(this.$mathquill.height() + 8);
                        var latex = $iframe.attr("data-latex"),
                            newLatex = this.getLatex();
                        if (latex != newLatex) {
                            $iframe.attr("data-latex", this.getLatex());
                            saveScene();
                        }
                    },
                    insertLatex: function (latex) {
                        this.$mathquill.mathquill("write", latex);
                        this.updateIframe();
                        this.removeCursor();
                    },
                    setLatex: function (latex) {
                        this.$mathquill.mathquill("latex", latex);
                        this.updateIframe();
                    },
                    getLatex: function () {
                        return this.$mathquill.mathquill("latex");
                    },
                    redraw: function () {
                        this.$mathquill.mathquill("redraw");
                    },
                    setDisabled: function () {
                        this.blur();
                        var latex = this.getLatex();
                        this.$mathquill.mathquill("revert").text(latex).mathquill();
                        this.updateIframe();
                        this.isDisabled = true;
                    },
                    setEnabled: function () {
                        this.$mathquill.removeClass("mathquill-rendered-math");
                        this.refresh();
                        this.isDisabled = false;
                    },
                    refresh: function () {
                        var latex = this.getLatex();
                        this.$mathquill.mathquill("revert").text(latex).mathquill("editable");
                        this.updateIframe();
                    },
                };

                /* 绑定到window上，给上级window调用 */
                window.formula = new Formula();
            });
        </script>
    </body>
</html>
